<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">Pagination</view>
			<view class="tui-page__desc">分页器</view>
		</view>
		<view class="tui-page__bd">
			<view class="tui-title thorui-cells">默认使用</view>
			<view class="thorui-padding">
				<tui-pagination total="100" :current="current" @change="change"></tui-pagination>
			</view>
			<view class="tui-title thorui-cells">调整样式</view>
			<view class="thorui-padding thorui-white__bg">
				<tui-pagination total="100" color="#fff" backgroundColor="#5677fc" currentColor="#5677fc"
					:current="current" @change="change"></tui-pagination>
			</view>
			<view class="tui-title thorui-cells">调整样式</view>
			<view class="thorui-padding thorui-white__bg">
				<tui-pagination total="100" color="#EB0909" backgroundColor="transparent" currentColor="#EB0909"
					:current="current" @change="change"></tui-pagination>
			</view>
			<view class="tui-title thorui-cells">调整样式</view>
			<view class="thorui-padding thorui-white__bg">
				<tui-pagination total="100" color="#07c160" borderColor="#07c160" backgroundColor="transparent"
					currentColor="#07c160" prevText="Prev" nextText="Next" :current="current" @change="change">
				</tui-pagination>
			</view>
			<view class="tui-title thorui-cells">调整样式</view>
			<view class="thorui-padding thorui-white__bg">
				<tui-pagination :width="100" total="100" color="#07c160" backgroundColor="transparent"
					currentColor="#07c160" custom :current="current" @change="change">
					<template v-slot:prev>
						<tui-icon name="arrowleft" color="#333" :size="68" unit="rpx"></tui-icon>
					</template>
					<template v-slot:next>
						<tui-icon name="arrowright" color="#333" :size="68" unit="rpx"></tui-icon>
					</template>
				</tui-pagination>
			</view>
			<view class="tui-title thorui-cells">隐藏页码</view>
			<view class="thorui-padding">
				<tui-pagination total="100" :isPage="false" radius="40px" :current="current" @change="change">
				</tui-pagination>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 1
			}
		},
		methods: {
			change(e) {
				console.log(e)
				this.current = e.current
			}
		}
	}
</script>

<style>
	.tui-title {
		width: 100%;
		font-size: 28rpx;
		color: #888;
		padding: 40rpx 30rpx 20rpx;
		box-sizing: border-box;
	}
</style>
